<div id="tables">
    <div class="am-scrollable-horizontal">
        <table v-bind:style="{width:tablewidth}" style="table-layout:fixed" class="am-table am-table-bordered am-table-centered am-table-striped am-text-nowrap">
            <thead>
                <tr>
                    <template v-if="selectAll">
                        <th><input type="checkbox" style="margin:0 auto;display: block" class="fl mr-10"></th>
                    </template>
                    <th v-for="(field,index) in fields" v-bind:style="{width:field.width}">
                        <b>{{field.column}}</b>
                    </th>
                    <template v-if="options">
                        <th v-bind:style="{width:optionwidth}">操作</th>
                    </template>
                </tr>
            </thead>
            <tbody>
                <tr class="gradeX" v-for="(item, index) in items" :key="index">
                    <template v-if="selectAll">
                        <td><input type="checkbox" class="fl mr-10"></td>
                    </template>
                    <td v-for="field in fields">
                        <template v-if="field.formatter">
                            <div v-html="field.formatter(index,item[field.field],item)"></div>
                        </template>
                        <template v-else>
                            {{item[field.field]}}
                        </template>
                    </td>
                    <td v-bind:style="{width:optionwidth}">
                        <template v-for="option in options">
                            <template v-if="option.formatter">
                                <div v-html="option.formatter(index,item[option.field],item)" class="fl" v-bind:style="{width:option.width}"></div>
                            </template>
                            <template v-else>
                                <div v-html="option.column" class="fl" v-bind:style="{width:option.width}"></div>
                            </template>
                        </template>
                    </td>
                </tr>
                <!-- more data -->
            </tbody>
        </table>
    </div>
    <div class="am-u-lg-12 am-cf">
        <div class="am-fr">
            <ul class="am-pagination tpl-pagination">
                <li><a href="javascript:;" v-on:click="toMin()">«</a></li>
                <template v-for="i in len">
                    <li v-if="i==flag" class="am-active"><a href="javascript:;" v-on:click="toPage(i)">{{i+startIndex}}</a></li>
                    <li v-else><a href="javascript:;" v-on:click=toPage(i)>{{i+startIndex}}</a></li>
                </template>
                <li><a href="javascript:;" v-on:click="toMax">»</a></li>
            </ul>
        </div>
    </div>
</div>